<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>添加菜谱</title>
	<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
	<div>
		<div><h3>上传菜谱</h3></div>
		<div>
			<div>分类</div>
			<div>
				<select id="ftypeid">
					<option value="1">早餐</option>
					<option value="2">烘焙甜品</option>
					<option value="3">鸡鸭禽类</option>
					<option value="4">猪牛羊肉</option>
					<option value="5">海鲜水产</option>
					<option value="6">蔬食</option>
					<option value="7">小炒</option>
					<option value="8">主食</option>
					<option value="9">例汤</option>
					<option value="10">中式面点</option>
					<option value="11">西餐</option>
					<option vaslue="12">果汁饮品</option>
					<option value="13">卤味酱料</option>
				</select>
			</div>
		</div>
		<div>
			<div>上传封面</div>
			<div>
				<input type="file" id="fpic" class="upload">
			</div>
		</div>
		<div>
			<div>菜名：</div>
			<div>
				<input type="text" id="fname" placeholder="请输入菜名">
			</div>
		</div>
		<div>
			<div>食材</div>
			<div>
				<input type="button" value="添加食材" id="foodBtn">
			</div>
			<div id="fprop_ul">
				<input type="text" id="prop1">
			</div>
			<div>
				<input type="button" id="get_prop" value="添加完成">
			</div>
			<div>
				<span id="prop_fin">正在添加食材……</span>
			</div>
		</div>
		<div>
			<div>步骤：</div>
			<div>
				<textarea id="fstep" cols="30" rows="10" style="resize: none;"></textarea>
			</div>
		</div>
		<div>
			<div>
				<span id="msg">正在上传菜谱……</span>
			</div>
			<div>
				<input type="button" id="btn" value="上传">
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var src = ''
		$('.upload').change(function() {
			var oFReader = new FileReader();
			var file = document.getElementById('fpic').files[0];
			oFReader.readAsDataURL(file);
			oFReader.onloadend = function(oFRevent) {
				src = oFRevent.target.result;
				// console.log(src)
				// 显示图片
				// $('img').attr('src', src);
			}
		})
		// 点击按钮，添加新的输入框，继续输入值
		var i = 2
		let prop = ''
		foodBtn.onclick = function(){
			var board = document.getElementById("fprop_ul")
			var e = document.createElement("input")
			e.type = "text"
			e.id = `prop${i}`
			var object = board.appendChild(e)
			let str_prop = `prop${i}`
			console.log(document.getElementById(`prop${i-1}`).value)
			prop += document.getElementById(`prop${i-1}`).value + ','
			i++
		}
		// 点击按钮，菜谱食材输入完成
		get_prop.onclick = function(){
			prop += document.getElementById(`prop${i-1}`).value
			prop_fin.innerHTML = '食材输入完成'
		}
		// 点击上传按钮，将所有菜品加入数据库
		btn.onclick = function(){
			src = encodeURIComponent(src)
			console.log('进入点击事件函数')
			// console.log(src)
			let data = `ftypeid=${ftypeid.value}&fpic=${src}&fname=${fname.value}&fprop=${prop}&fstep=${fstep.value}`
			let xhr = new XMLHttpRequest()
			xhr.open('POST','/v2/f/add')
			xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=utf-8')
			xhr.onload = function(){
				let result = xhr.responseText
				// let data_r = JSON.parse(result).msg
				msg.innerHTML = result
				console.log(result)
			}
			xhr.send(data)
		}

	</script>
</body>
</html>